import { Button, Drawer, Space, Form, Upload, Avatar, Typography, Image } from 'antd'
import { PlusOutlined, AntDesignOutlined, } from '@ant-design/icons'
import { useStore } from '../store'
import { useEffect } from 'react'
import '../component/component.scss'


const { Text, } = Typography
const InforComponent = ({ open, setOpen }) => {

  const { userInforStore, } = useStore()
  useEffect(() => {
    userInforStore.getUserInfor()
  }, [userInforStore])
  const onClose = () => {
    setOpen(false)
  }
  return (
    <Drawer
      title="个人信息"
      width={720}
      onClose={onClose}
      open={open}
      bodyStyle={{
        paddingBottom: 80,
      }}

    >
      <Form
        labelCol={{
          span: 6,
        }}
        wrapperCol={{
          span: 12,
        }}
        layout="horizontal"
      >
        <Form.Item className='infor-formitem'>
          <Avatar
            size={{
              xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100,
            }}
            icon={<AntDesignOutlined />}
            src={
              <Image

                src="https://joeschmoe.io/api/v1/random"
              />
            }
          />
        </Form.Item>
        <Form.Item label="昵称">
          <Text>
            {userInforStore.userInfor.real_name}
          </Text>
        </Form.Item>
        <Form.Item label="账号">
          <Text>{userInforStore.userInfor.username}
          </Text>
        </Form.Item>

        <Form.Item label="身份">
          {userInforStore.userInfor.identity === 1 ? '教师' : '学生'}
        </Form.Item>
        <Form.Item label="邮箱">
          <Text>{userInforStore.userInfor.email}</Text>
        </Form.Item>
        <Form.Item label="手机号码">
          <Text>{userInforStore.userInfor.phone}</Text>
        </Form.Item>
        <Form.Item label="生日">
          <Text>{userInforStore.userInfor.birthday}</Text>
        </Form.Item>
        <Form.Item label="个人简介" >
          <Text>{userInforStore.userInfor.introduce}</Text>
        </Form.Item>

      </Form>
    </Drawer>
  )
}
export default InforComponent